<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.js"></script>
	<style>
		#chart {
			width: 800px;
			height: 400px;
		}
	</style>
	<script>// 自定义主题
		(function (root, factory) {
			if (typeof define === 'function' && define.amd) {
				// AMD. Register as an anonymous module.
				define(['exports', 'echarts'], factory);
			} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
				// CommonJS
				factory(exports, require('echarts'));
			} else {
				// Browser globals
				factory({}, root.echarts);
			}
		}(this, function (exports, echarts) {
			var log = function (msg) {
				if (typeof console !== 'undefined') {
					console && console.error && console.error(msg);
				}
			};
			if (!echarts) {
				log('ECharts is not Loaded');
				return;
			}
			var colorPalette = ['#d87c7c','#919e8b', '#d7ab82',  '#6e7074','#61a0a8','#efa18d', '#787464', '#cc7e63', '#724e58', '#4b565b'];
			echarts.registerTheme('vintage', {
				color: colorPalette,
				backgroundColor: '#fef8ef',
				graph: {
					color: colorPalette
				}
			});
		}));
	</script>
</head>
<body>
	<div id="chart"></div>
	<script text="text/javascript">
		const chartDom = document.getElementById('chart');
		const chart = echarts.init(chartDom,'vintage');// 使用默认渲染方式 canvas
		// const chart = echarts.init(chartDom,'vintage',{renderer:'svg'});
		chart.setOption({
			xAxis: [ 
				{ type: 'category',gridIndex: 0 },// 第一套坐标系的横轴
				{ type: 'category',gridIndex: 1} // 第二套坐标系的横轴
			],
			yAxis: [
				{ min: 0,max: 100,gridIndex:0 },// 控制左边纵向坐标系的最小和最大刻度，第一套坐标系的第一个纵轴
				{ splitLine: { show:false },gridIndex:0 },// 隐藏右边纵向坐标系的横线，第一套坐标系的第二个纵轴
			    { minx: 0,max: 150,gridIndex:1} // 第二个坐标系的纵轴
			],
			grid:[{ bottom:'55%' },{ top:'55%' }],
			dataset: {
				source: [ // 单坐标系的数据是模型形式的数据 - DB中的单行数据体现为前端的一个对象整体显示
					['product','2012','2013','2014','2015'],// 两个纵向坐标系的图表时，数据源是纵向体现 - 相比上面的横向体现
					['Matcha Latte',41.1,30.4,65.1,53.3],
					['Milk Tea',86.5,92.1,85.7,83.1]
				]
			},
			series: [
				{ // 第一套坐标系的柱状图
					type: 'bar',
					seriesLayoutBy: 'row',// 单坐标系的模型完整体现模式下不需要设置该参数
					xAxisIndex: 0,
					yAxisIndex: 0
				},
				{ // 第一套坐标系的折线图
					type: 'line',
					seriesLayoutBy: 'row',
					xAxisIndex: 0,
					yAxisIndex: 1
				},
				{ // 第二套坐标系的柱状图
					type: 'bar',
					seriesLayoutBy: 'row',
					xAxisIndex: 1,
					yAxisIndex: 2
				}
			]
			
		});
	</script>
</body>
</html>